Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
redux-actions
Advanced tools
The redux-actions npm package provides utilities for creating and handling actions in Redux applications. It simplifies the process of defining action creators and reducers, making the code more readable and maintainable.
createAction
The createAction function simplifies the creation of action creators. It takes a single argument, the action type, and returns an action creator function that can be called with a payload.
const { createAction } = require('redux-actions');
const increment = createAction('INCREMENT');
console.log(increment()); // { type: 'INCREMENT' }
console.log(increment(1)); // { type: 'INCREMENT', payload: 1 }
handleAction
The handleAction function allows you to create a reducer for a specific action type. It takes the action creator, a reducer function, and an initial state as arguments.
const { handleAction } = require('redux-actions');
const increment = createAction('INCREMENT');
const reducer = handleAction(increment, (state, action) => state + action.payload, 0);
console.log(reducer(0, increment(1))); // 1
handleActions
The handleActions function allows you to create a reducer that handles multiple action types. It takes an object mapping action creators to reducer functions and an initial state as arguments.
const { handleActions } = require('redux-actions');
const increment = createAction('INCREMENT');
const decrement = createAction('DECREMENT');
const reducer = handleActions({
[increment]: (state, action) => state + action.payload,
[decrement]: (state, action) => state - action.payload
}, 0);
console.log(reducer(0, increment(1))); // 1
console.log(reducer(1, decrement(1))); // 0
Redux Toolkit is the official, recommended way to write Redux logic. It includes utilities to simplify common use cases like store setup, creating reducers, and writing immutable update logic. Compared to redux-actions, Redux Toolkit offers a more comprehensive set of tools and is maintained by the Redux team.
Redux Saga is a library that aims to make application side effects (e.g., asynchronous actions) easier to manage, more efficient to execute, and better at handling failures. While redux-actions focuses on simplifying action creation and reducers, redux-saga is more about handling complex side effects in a Redux application.
Redux Thunk is a middleware that allows you to write action creators that return a function instead of an action. This can be used to delay the dispatch of an action or to dispatch only if a certain condition is met. Unlike redux-actions, which focuses on simplifying action and reducer creation, redux-thunk is more about handling asynchronous actions.
Flux Standard Action utilities for Redux.
npm install --save redux-actions
import { createAction, handleAction, handleActions } from 'redux-actions';
createAction(type, payloadCreator = Identity, ?metaCreator)
Wraps an action creator so that its return value is the payload of a Flux Standard Action. If no payload creator is passed, or if it's not a function, the identity function is used.
Example:
let increment = createAction('INCREMENT', amount => amount);
// same as
increment = createAction('INCREMENT');
expect(increment(42)).to.deep.equal({
type: 'INCREMENT',
payload: 42
});
If the payload is an instance of an Error
object,
redux-actions will automatically set action.error
to true.
Example:
const increment = createAction('INCREMENT');
const error = new TypeError('not a number');
expect(increment(error)).to.deep.equal({
type: 'INCREMENT',
payload: error,
error: true
});
createAction
also returns its type
when used as type in handleAction
or handleActions
.
Example:
const increment = createAction('INCREMENT');
// As parameter in handleAction:
handleAction(increment, {
next(state, action) {...},
throw(state, action) {...}
});
// As object key in handleActions:
const reducer = handleActions({
[increment]: (state, action) => ({
counter: state.counter + action.payload
})
}, { counter: 0 });
NOTE: The more correct name for this function is probably createActionCreator()
, but that seems a bit redundant.
Use the identity form to create one-off actions:
createAction('ADD_TODO')('Use Redux');
metaCreator
is an optional function that creates metadata for the payload. It receives the same arguments as the payload creator, but its result becomes the meta field of the resulting action. If metaCreator
is undefined or not a function, the meta field is omitted.
handleAction(type, reducer | reducerMap, ?defaultState)
Wraps a reducer so that it only handles Flux Standard Actions of a certain type.
If a single reducer is passed, it is used to handle both normal actions and failed actions. (A failed action is analogous to a rejected promise.) You can use this form if you know a certain type of action will never fail, like the increment example above.
Otherwise, you can specify separate reducers for next()
and throw()
. This API is inspired by the ES6 generator interface.
handleAction('FETCH_DATA', {
next(state, action) {...},
throw(state, action) {...}
});
The optional third parameter specifies a default or initial state, which is used when undefined
is passed to the reducer.
handleActions(reducerMap, ?defaultState)
Creates multiple reducers using handleAction()
and combines them into a single reducer that handles multiple actions. Accepts a map where the keys are passed as the first parameter to handleAction()
(the action type), and the values are passed as the second parameter (either a reducer or reducer map).
The optional second parameter specifies a default or initial state, which is used when undefined
is passed to the reducer.
(Internally, handleActions()
works by applying multiple reducers in sequence using reduce-reducers.)
Example:
const reducer = handleActions({
INCREMENT: (state, action) => ({
counter: state.counter + action.payload
}),
DECREMENT: (state, action) => ({
counter: state.counter - action.payload
})
}, { counter: 0 });
redux-actions is handy all by itself, however, its real power comes when you combine it with middleware.
The identity form of createAction
is a great way to create a single action creator that handles multiple payload types. For example, using redux-promise and redux-rx:
const addTodo = createAction('ADD_TODO');
// A single reducer...
handleAction('ADD_TODO', (state = { todos: [] }, action) => ({
...state,
todos: [...state.todos, action.payload]
}));
// ...that works with all of these forms:
// (Don't forget to use `bindActionCreators()` or equivalent.
// I've left that bit out)
addTodo('Use Redux')
addTodo(Promise.resolve('Weep with joy'));
addTodo(Observable.of(
'Learn about middleware',
'Learn about higher-order stores'
)).subscribe();
Use redux-actions in combination with FSA-compliant libraries.
FAQs
Flux Standard Action utlities for Redux
The npm package redux-actions receives a total of 252,157 weekly downloads. As such, redux-actions popularity was classified as popular.
We found that redux-actions demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.